<template>
<div class="login" :style="loginStyle">
  <el-collapse >
    <el-collapse-item title="点击头部区域选择皮肤" name="1">
      <el-row style="margin-left: 50px;margin-top: 5px">
        <el-col :span="4" v-for="(image,index) in images" :key="index">
          <el-image  @mousemove="big(index)" @mouseleave="small(index)" :ref="index" :src="image" style="height: 80px;width: 150px;border-radius: 5px" @click="changeBackageImage(image)"></el-image>
        </el-col>

      </el-row>
    </el-collapse-item>
  </el-collapse>
  <mochi-box class="mochiClass"  shiba="sesame" mood="monaka" blush left-eye="open" right-eye="open" left-ear="flat" right-ear="flat" style="    margin-left: 60%;">
    <el-form :model="loginForm" :rules="rules" ref="loginForm"  class="demo-ruleForm" v-show="loginShow" >
      <h2 style="margin-bottom: 20px;text-align: center;">兔子宝典</h2>
      <el-form-item  prop="userName">
        <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item  prop="password">
        <el-input prefix-icon="el-icon-key"   type="password" show-password v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item  prop="yzm">
      </el-form-item>
      <el-form-item>
        <el-button class="LoginButtonClass" type="primary" @click="submitForm('loginForm')">登 录</el-button>
<!--        <el-button class="RegButtonClass" type="text" @click="regShow=true ,loginShow=false"  >还没账号？点击注册</el-button>-->
      </el-form-item>
    </el-form>
    <el-form :model="regForm" :rules="Regrules" ref="regForm"  class="demo-ruleForm" v-show="regShow">
      <h2 style="margin-bottom: 20px;text-align: center;">养兔*宝典</h2>
      <el-form-item  prop="userName">
        <el-input  prefix-icon="el-icon-user-solid" v-model="regForm.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item  prop="password">
        <el-input prefix-icon="el-icon-key"   type="password" show-password v-model="regForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item  prop="confirmPassword">
        <el-input  prefix-icon="el-icon-key" v-model="regForm.confirmPassword" type="password" placeholder="请输入确认密码" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="float:right " type="primary" @click="reg('regForm')">登 录</el-button>
        <el-button style="float:right " type="primary">登 录</el-button>
        <el-button type="default" @click="regShow=false,loginShow=true">取 消</el-button>
      </el-form-item>
    </el-form>
  </mochi-box>
</div>
  <!--只能有一个div-->
</template>

<script>
 import MochiBox from "@/components/Mochi/MochiBox.vue";
export default {
  components: {
    MochiBox
  },
  name: "Login",
  data() {
    return {
      url:'',
      code:'',
      loginShow:true,
      regShow:false,
      checked:false,
      loginForm: {
        userName: '',
        password: '',
        yzm: ''
      },
      regForm:{
        userName:'',
        password:'',
        confirmPassword:'',
        pic:''
      },
      Regrules:{
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
        ]
      },
      loginStyle:window.sessionStorage.getItem('loginSt yle') || 'background: url("https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/backg.jpg") 0% 0% / cover repeat-x; height: 100%;',
      images:[
        'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/backg.jpg',
      ]
    }
  },
  methods: {
    changeBackageImage(image){
      let loginStyle = 'background: url("'+image+'") 0% 0% / cover repeat-x; height: 100%;'
      this.loginStyle = loginStyle
      window.sessionStorage.setItem('loginStyle',loginStyle)
    },
    submitForm() {
           this.$http.get('/customer/check',{params:{
               userName:this.loginForm.userName,
               password:this.loginForm.password
             }}).then(res=>{
               if(res.data.code===200){
                 // this.$message.success('登录成功')
                 console.log("+"+res.data.data)
                 //将查询用户信息存储
                 localStorage.setItem("user",JSON.stringify(res.data.data))
                 //登录成功，跳转到页面
                 this.$router.push('/DailyRabbitBreeding')
               } else{
                 this.$message.error('登录失败')
               }
           })
    },
  },
}
</script>

<style scoped>
/deep/.el-collapse-item__header{
  background-color: #0000005e;
  color: #FFFFFF;
  padding-left: 50px;
  font-size: 15px;
}
/deep/.el-collapse-item__wrap{
  background-color: #0000005e;
}
/deep/.MochiBox .MochiContent{
  background: #f7f7f7;
}
   @import url("Login.css");
</style>